<template>
  <div class="container">
    <el-dialog
      title="题目预览"
      :model="formBase"
      :visible="dialogVisible"
      @close="close"
    >
      <el-row>
        <el-col :span="6">
          <el-row>
            【题型】：{{
              formBase.questionType === "1"
                ? "单选题"
                : formBase.questionType === "2"
                ? "多选题"
                : "解答题"
            }}
          </el-row>
        </el-col>
        <el-col :span="6">
          <el-row> 【编号】：{{ formBase.id }} </el-row>
        </el-col>
        <el-col :span="6">
          <el-row>
            【难度】：{{
              formBase.difficulty === "1"
                ? "简单"
                : formBase.difficulty === "2"
                ? "一般"
                : "困难"
            }}
          </el-row>
        </el-col>
        <el-col :span="6">
          <el-row> 【标签】：{{ formBase.tags }} </el-row>
        </el-col>
      </el-row>
      <el-row style="margin-top: 20px">
        <el-col :span="6">
          <el-row> 【学科】：{{ formBase.subject }} </el-row>
        </el-col>
        <el-col :span="6">
          <el-row> 【目录】：{{ formBase.catalog }} </el-row>
        </el-col>
        <el-col :span="6">
          <el-row> 【方向】：{{ formBase.direction }} </el-row>
        </el-col>
      </el-row>
      <hr style="margin-top: 20px; margin-button: 10px" />
      <el-row>
        <el-col
          >【题干】：
          <template>
            <span v-html="formBase.question"></span>
          </template>
        </el-col>
      </el-row>
      <hr style="margin-top: 20px; margin-button: 20px" />
      <el-row>
        【名师讲解】：
        <el-button type="danger" size="small" @click="showVideo = true"
          >视频答案预览</el-button
        >
      </el-row>
      <el-row>
        <video
          style="margin-top: 20px"
          v-if="showVideo"
          width="80%"
          controls
          autoplay
        >
        </video>
      </el-row>
      <hr style="margin-top: 20px; margin-button: 20px" />
      <el-row>
        【答案解析】：
        <template>
          <span v-html="formBase.answer"></span>
        </template>
      </el-row>
      <hr style="margin-top: 20px; margin-button: 10px" />
      <el-row> 【题目备注】：{{ formBase.remarks }} </el-row>
      <span slot="footer" class="dialog-footer">
        <el-row type="flex" justify="end">
          <el-button size="mini" type="primary" @click="dialogVisible = false"
            >关闭</el-button
          >
        </el-row>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    formBase: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      showVideo: false
    }
  },
  methods: {
    close() {
      this.showVideo = false
      this.$emit('update:dialogVisible', false)
    }
  }
}
</script>

<style scoped lang='less'></style>
